<template>
	<view class="page">
		<view class="choice-year">
			<view class="label">
				选择年份：
			</view>
			<picker mode="date" :value="data.year"  :end="showCurrentTime()" 
			@change="bindDateChange" fields="year" @cancel="cancel">
				<view class="uni-input" >{{data.year}}</view>
				<template>
				      <view class="slot-content">这是一个插槽内容</view>
				</template>
			</picker>
		</view>
		<view class="list" v-for="i in data.list" @click="jumpDetail(i)">
			<view class="list-title">
				{{i.areaName}}
			</view>
			<view class="list-time">
				{{i.year}}年
			</view>
			<view class="list-points">
				+{{i.rewardPoints}}积分
			</view>
		</view>
		<view class="loading" ref="loading">
			{{isLoading}}
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		integralListApi
	} from "@/api/integral.js"
	onMounted(() => {
		const observer = new IntersectionObserver((entries) => {
			if (entries[0].isIntersecting) {
				if (data.total > 0 && data.list.length == data.total) return
				isLoading.value = "正在加载更多数据~~"
					++data.pageNum
				integralListApiFn()
			}
		})
		observer.observe(document.querySelector('.loading'))
	})
	const isLoading = ref("")
	const data = reactive({
		list: [],
		total: 0,
		pageNum: 0,
		pageSize: 20,
		year: "请选择年份",
		endDate:""
	})
	//获取列表
	const integralListApiFn = () => {
		integralListApi({
			pageNum: data.pageNum,
			pageSize: data.pageSize,
			year:data.year=='请选择年份'?'':data.year
		}).then(res => {
			data.list = data.list.concat(res.rows)
			data.total = parseInt(res.total)
			isLoading.value = data.list.length == data.total ? "没有更多数据了" : ""
		})
	}
	//跳转明细
	const jumpDetail = (e) => {
		uni.navigateTo({
			url: `/pages/points-details/points-details?belongToArea=${e.belongToArea}&year=${e.year}`
		})
	}
	//选择年份
	const bindDateChange = (e) => {
		data.year = e.detail.value
		data.pageNum=1
		data.list=[]
		integralListApiFn()
	}
	//时间要求
	const showCurrentTime = () => {
		  return new Date().getFullYear();
	}
	//取消筛选
	const cancel=()=>{
		data.pageNum=1
		data.list=[]
		data.year='请选择年份'
		integralListApiFn()
	}
</script>

<style lang="scss" scoped>
	.list {
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx rgba(8, 23, 56, 0.05);
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 0 30rpx;
		position: relative;
		margin-bottom: 20rpx;

		.list-time {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		.list-title {
			color: $uni-text-color;
			margin-bottom: 12rpx;
		}

		.list-points {
			color: $uni-color-primary;
			font-size: 32rpx;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.loading {
		font-size: 24rpx;
		color: #979797;
		margin: 40rpx auto;
		width: fit-content;
	}
	.choice-year {
		display: flex;
		color: $uni-text-color-grey;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 10rpx;
		background-color: #c12130;
		.label{
			color: $uni-text-color-inverse;
		}
	}
	.uni-input {
		color: $uni-text-color-inverse;
	}
</style>